<template>
  <div>
    <!-- 头部组件 -->
    <top content="我的">
      <template #aaa>
        <van-icon name="setting" class="icon_r" color="#f2473d" />
      </template>
    </top>

    <div class="guan">
      <div class="zi">
        <van-icon name="chat-o" class="icon" color="#f2473d" /><br />
        密码管理
      </div>
      <div class="zi">
        <van-icon name="credit-pay" class="icon" color="#f2473d" /><br />
        银行卡管理
      </div>
    </div>
    <!-- 下面多行条列 
    宽的
    -->
    <div>
      <texteds texts="风险承受能力评估">
        <template #Divider>
          <van-icon name="records" color="#f2473d" />
        </template>
      </texteds>
    </div>
    <!-- 稍微窄点的 -->
    <div>
      <texteds2 texts2="安全保障">
        <template #Divider>
          <van-icon name="location-o" color="#f2473d" />
        </template>
      </texteds2>
    </div>

    <div @click="goCollect">
      <texteds texts="我的收藏">
        <template #Divider>
          <van-icon name="manager" color="#f2473d" />
        </template>
      </texteds>
    </div>

    <div @click="goRefund">
      <texteds-2 texts2="我的退款信息">
        <template #Divider>
          <van-icon name="upgrade" color="#f2473d" />
        </template>
      </texteds-2>
    </div>

    <div>
      <texteds texts="帮助中心">
        <template #Divider>
          <van-icon name="question-o" color="#f2473d" />
        </template>
      </texteds>
    </div>
    <div>
      <texteds-2 texts2="关于我们">
        <template #Divider>
          <van-icon name="manager" color="#f2473d" />
        </template>
      </texteds-2>
    </div>

    <div @click="openZhu" >
<!--      <el-button type="primary" size="medium" v-if="this.status==0" ></el-button>-->
      <div v-if="this.status==3">
      <texteds texts="申请餐厅入驻">
        <template #Divider>
          <van-icon name="manager" color="#f2473d" />
        </template>
      </texteds>
      </div>
      <el-button type="primary" size="medium" v-if="this.status==0" >餐厅入驻审核中</el-button>
      <el-button type="success" size="medium" v-if="this.status==1" >餐厅申请通过</el-button>
      <el-button type="danger" size="medium" v-if="this.status==2" >餐厅申请驳回</el-button>
    </div>

    <div>
      <texteds-2 texts2="检查更新">
        <template #Divider>
          <van-icon name="upgrade" color="#f2473d" />
        </template>
      </texteds-2>
    </div>

    <div>
      <texteds-2 texts2="联系客服">
        <template #Divider>
          <van-icon name="phone-circle-o" color="#f2473d" />
        </template>
      </texteds-2>
    </div>

    <div id="tui">
      <button class="btn" @click="gologin">退出登录</button>
    </div>
  </div>
</template>





<script>
import top from "../components/head.vue";
import texteds from "../components/MyCom.vue";
import texteds2 from "../components/MyCom2.vue";
export default {
  components: {
    top,
    texteds,
    texteds2,
  },
  data(){
    return{
      //当前角色Id
      roleId:"",
      //
      status:"3",
    }
  },
  created() {
    this.InsertRoldId();
  },
  methods: {
    //查询当前角色的roleId
    InsertRoldId(){
     var token=sessionStorage.getItem("token");
      this.$http.post("/user/user/insertRoleId?token="+token,this.zhuceRestaurantForm).then(result=>{
        if (result.data.code==2000){
          this.roleId=result.data.data;
        }
      });
    },
    gologin() {
      //删除内存中的 token
      sessionStorage.removeItem("token");
      //刷新页面 重新进入login页面
      location.reload();
    },
    goCollect(){
      this.$router.push("/collect");
    },
    goRefund(){
      this.$router.push("/refund")
    },
    //跳转到申请入驻页面
    openZhu(){
      if (this.roleId==3){
      this.$router.push("/open");
      }else {
        this.$message.error("当前用户没有该权限");
      }
    },
    },




};
</script>

<style lang="less" scoped>
.top {
  width: 100vw;
  height: 7vh;
  background-color: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
  .set {
    float: right;
    right: -35vw;
    font-size: 4vh;
    color: #3fbc58;
  }
}
.guan {
  height: 15vh;
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid rgb(167, 164, 164);
  .zi {
    text-align: center;
    .icon {
      justify-content: center;
      font-size: 8vw;
      color: #3fbc58;
    }
  }
}
#tui {
  display: flex;
  align-content: center;
  justify-content: center;
  .btn {
    width: 60vw;
    height: 10vw;
    background-color: #f2473d;
  }
}
</style>